<template>
	<view class="container">
		<!-- 自定义导航栏 -->
		<view class="nav-bar">
			<!-- 	<view class="nav-left" @click="handleLogin">登录</view> -->
			<view class="nav-title">小当家</view>
			<view class="nav-right" @click="gotosearch()">
				<uni-icons type="search" size="20" color="white"></uni-icons>
			</view>
		</view>

		<!-- 轮播图 -->
		<swiper class="swiper" indicator-dots autoplay>
			<swiper-item v-for="(item, index) in swiperList" :key="index" class="swiper-item">
				<image :src="item.img" mode="aspectFill"></image>
			</swiper-item>
		</swiper>

		<!-- 商品分类横向滚动 -->
		<view class="classification-box">
			<!-- <view class="section-title">商品分类</view> -->
			<scroll-view class="hot-scroll" scroll-x>
				<view class="hot-item" v-for="(item, index) in hotList" :key="index" @click="gotolist(item)">
					<image :src="item.img" mode="aspectFill"></image>
					<text class="hot-text">{{ item.name }}</text>
				</view>
			</scroll-view>

		</view>


		<!-- 营销方式区域 -->
		<view v-for="(section, idx) in goodsSections" :key="idx" class="goods-section">
			<view class="section-header">
				<text class="section-title">{{ section.title }}</text>
				<text class="more" @click="gotomoregoods()">更多 ></text>
			</view>
			<view class="goods-grid">
				<view class="goods-item" v-for="(item, index) in section.list" :key="index" @click="gotoshop(item)">
					<image :src="item.img" mode="aspectFill"></image>
					<view class="goods-info">
						<text class="goods-name">{{ item.name }}</text>
						<text class="goods-price">￥{{ item.price }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperList: [{
						img: '/static/shophome-lbt1.jpg'
					},
					{
						img: '/static/shophome-lbt2.jpg'
					},
					{
						img: '/static/shophome-lbt3.jpg'
					},
				],
				hotList: [], // 商品分类
				goodsSections: [], // 初始化为动态数组
				marketingMethods: [], // 营销方式列表
			};
		},
		onLoad() {
			// 页面加载时请求营销方式和商品分类数据
			this.fetchMarketingMethods();
			this.fetchCategories();
		},
		methods: {
			handleLogin() {
				uni.navigateTo({
					url: '/pages/login/login',
				});
			},
			gotoperson() {
				uni.navigateTo({
					url: '/pages/shop/shop',
				});
			},
			gotomoregoods() {
				uni.navigateTo({
					url: '/pages/shop-homepage/shop-moregoods',
				});
			},
			fetchCategories() {
				// 请求商品分类数据
				uni.request({
					url: 'http://localhost:8080/goodscategory/goodscategory/list',
					method: 'GET',
					header: {
						'Content-Type': 'application/json',
						// Authorization: 'eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjA2NDQzYjE4LWQ4MjUtNGU0Yi1iZTBiLTA1YzU3ZDVkMGI0NCJ9.jd8L3_pAtAtsAjesQi7KKNarrmq4pGGxqo1UfW14-u4OAg5Qu2_Do6eKtawe8LfeSSu48OzhX0ijEVlzm-ntag',
						'Authorization': uni.getStorageSync('token'),
					},
					success: (res) => {
						if (res.data.code === 200) {
							this.hotList = res.data.rows.map((category) => ({
								name: category.categoryName,
								categoryId: category.categoryId, // 添加 categoryId
								categoryName: category.categoryName, // 添加 categoryName
								img: `http://localhost:8080${category.categoryImage}`,
							}));
						} else {
							console.error('获取商品分类失败：', res.data.msg);
						}
					},
					fail: (err) => {
						console.error('请求失败：', err);
					},
				});
			},
			fetchMarketingMethods() {
				// 请求营销方式列表
				uni.request({
					url: 'http://localhost:8080/marketing/marketing/list',
					method: 'GET',
					header: {
						'Content-Type': 'application/json',
						// Authorization: 'eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjA2NDQzYjE4LWQ4MjUtNGU0Yi1iZTBiLTA1YzU3ZDVkMGI0NCJ9.jd8L3_pAtAtsAjesQi7KKNarrmq4pGGxqo1UfW14-u4OAg5Qu2_Do6eKtawe8LfeSSu48OzhX0ijEVlzm-ntag',
						'Authorization': uni.getStorageSync('token'),
					},
					success: (res) => {
						if (res.data.code === 200) {
							this.marketingMethods = res.data.rows;
							this.fetchGoodsForMarketing();
						} else {
							console.error('获取营销方式失败：', res.data.msg);
						}
					},
					fail: (err) => {
						console.error('请求失败：', err);
					},
				});
			},
			fetchGoodsForMarketing() {
				// 根据营销方式获取商品
				const promises = this.marketingMethods.map((marketing) => {
					return new Promise((resolve) => {
						uni.request({
							url: `http://localhost:8080/goods/goods/list?methodsId=${marketing.methodsId}`,
							method: 'GET',
							header: {
								'Content-Type': 'application/json',
								// Authorization: 'eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjA2NDQzYjE4LWQ4MjUtNGU0Yi1iZTBiLTA1YzU3ZDVkMGI0NCJ9.jd8L3_pAtAtsAjesQi7KKNarrmq4pGGxqo1UfW14-u4OAg5Qu2_Do6eKtawe8LfeSSu48OzhX0ijEVlzm-ntag',
								'Authorization': uni.getStorageSync('token'),
							},
							success: (res) => {
								if (res.data.code === 200) {
									const goodsList = res.data.rows.map((item) => ({
										goodsId: item.goodsId, // 添加 goodsId
										name: item.goodsName,
										price: item.goodsPrice,
										img: `http://localhost:8080${item.goodsImage1}`,
									}));
									resolve({
										title: marketing.marketingMethods,
										list: goodsList,
									});
								} else {
									resolve(null);
								}
							},
							fail: (err) => {
								console.error('请求失败：', err);
								resolve(null);
							},
						});
					});
				});

				Promise.all(promises).then((results) => {
					this.goodsSections = results.filter((result) => result !== null);
				});
			},
			gotolist(category) {
				uni.navigateTo({
					// url: `/pages/shop-goodslist/shop-goodslist?categoryId=${category.categoryId}&categoryName=${category.categoryName}`
					url: `/pages/shop-homepage/shop-goodscategory?categoryId=${category.categoryId}&categoryName=${category.categoryName}`
				});
			},

			gotoshop(item) {
				console.log('跳转传递的 goodsId:', item.goodsId); // 调试日志
				uni.navigateTo({
					url: `/pages/shop-details/shop-details?goodsId=${item.goodsId}`
				});
			},
			gotosearch() {
				uni.navigateTo({
					url: `/pages/shop-search/newshop-search`
				});
			},
		},
	};
</script>

<style scoped>
	.container {
		/* background: #f5f5f5; */
		background-color: #FFF8F0;
		padding-bottom: 30rpx;
	}

	.nav-bar {
		/* display: flex;
		align-items: center;
		height: 90rpx;
		padding: 0 30rpx;
		background: #fff; 
		color: orange; */

		/* 		display: flex;
		align-items: center;
		padding: 20rpx 0;
		background: #fff;
		background-color: #FFF8F0;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.2);
		margin-bottom: 20rpx; */

		display: flex;
		align-items: center;
		padding: 20rpx 0;
		background: #F7B62D;
		color: white;
	}

	.nav-left {
		width: 100rpx;
		font-size: 28rpx;
		color: #666;
	}

	.nav-title {
		/* flex: 1;
		text-align: center;
		font-size: 36rpx;
		font-weight: bold; */

		flex: 1;
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
		margin-left: 50rpx;
	}

	.nav-right {
		/* width: 100rpx; */
		text-align: right;
		margin-right: 10px;
	}

	.swiper {
		/* height: 350rpx; */
		height: 350rpx;
		/* width: 96%; */
		margin: 0 auto;
	}

	.swiper-item image {
		width: 100%;
		height: 100%;
	}

	.section-title {
		/* 	padding: 20rpx 30rpx;
		font-size: 32rpx;
		font-weight: bold; */
		/* color: orange; */

		font-size: 32rpx;
		font-weight: bold;
		/* margin-bottom: 10px; */
	}

	.classification-box {
		/* 		padding: 2%;
		background: white;
		width: 92%;
		margin: 0 auto;
		border-radius: 10rpx;
		margin-top: 10px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */


		padding: 2%;
		border-radius: 10rpx;
		background-color: #fffdeb;
		margin-bottom: 10px;

	}

	.hot-scroll {
		white-space: nowrap;
		margin-top: 10px;
		/* padding: 0 30rpx; */
	}

	.hot-item {
		display: inline-block;
		width: 200rpx;
		margin-right: 20rpx;
	}

	.hot-item image {
		/* 		width: 200rpx;
		height: 200rpx;
		border-radius: 10rpx; */

		width: 200rpx;
		height: 40px;
		border-radius: 50rpx;
	}

	.hot-text {
		display: block;
		font-size: 26rpx;
		text-align: center;
		padding: 10rpx 0;
	}

	.goods-section {
		background: #fff;
		margin: 2%;
		border-radius: 10rpx;
		padding: 2%;

		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
	}

	.more {
		color: #666;
		font-size: 24rpx;
	}

	.goods-grid {
		display: flex;
		flex-wrap: wrap;
	}

	.goods-item {
		/* width: 48%;
		margin: 1%; */

		width: 44%;
		margin: 1%;
		/* background: #ffeded; */
		padding: 2%;
		border-radius: 10px;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.2);
	}

	.goods-item image {
		width: 100%;
		height: 300rpx;
		border-radius: 10rpx;

		margin-bottom: 5px;
	}

	.goods-info {
		/* padding: 10rpx; */
		border-top: 1px solid #dcd7d7;
	}

	.goods-name {
		font-size: 28rpx;
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-bottom: 5px;
	}

	.goods-price {
		color: #e4393c;
		font-size: 30rpx;
	}
</style>
